<template>
  <div id="app">
    <MyTable :data="list">
      <template #default="obj">
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>



    <MyTable :data="list2">
      <!-- 结构 -->
      <template #default="{row}">
        <button @click="show(row)">查看</button>
      </template>
    </MyTable>
    

  </div>
</template>

<script>

import MyTable from './components/MyTable.vue';

  // 分类 : 1.默认插槽  2.具名插槽
  // 作用域插槽  , 定义插槽时,可以向内部传值 .使用插槽时可以获取到值
  export default {
    components:{
      MyTable
    },

    data(){
      return {
        list:[
          {id:1,name:'jack',age:17},
          {id:2,name:'rose',age:17},
          {id:3,name:'dark',age:16},
        ],
        list2:[
          {id:1,name:'张大华',age:17},
          {id:2,name:'李小树',age:17},
          {id:3,name:'dark',age:16},
        ],
      }
    },
    methods:{
      del(id){
        this.list = this.list.filter(item=>item.id !== id)
      },
      show(row){
        // obj.row.name  x
        alert(`姓名:${row.name};年龄:${row.age}`)
      }
    }
    

  }
</script>

<style>

</style>
